<template>
    <div class="page">
      <div class="video-search" style="width: 500px;margin-top: 25px">
        <Input search enter-button="搜索" size="large" autofocus v-model="formData.searchTitle" @on-search="searchVideo(formData.currentPage, formData.pageCount)"/>
      </div>
      <div style="width: 1000px;"><divider></divider></div>
      <div class="search-classificaton" v-if="formData.classificationDropdownData">
        <Button type="text" @click="changeOrderType(1)">最多点击</Button>
        <Button type="text" @click="changeOrderType(0)">最新投稿</Button>
        <Dropdown trigger="custom" :visible="item.visible" style="margin-left: 10px;margin-top: 10px;" v-for="item in formData.classificationDropdownData">
          <Button type="text" @click="dropdownHandleOpen(item)">{{item.classification.classificationName}}<Icon type="ios-arrow-down"></Icon></Button>
          <DropdownMenu slot="list" style="max-width: 180px">
            <div style="text-align: right;">
              <Button type="primary" size="small" style="text-align: center;line-height: 5px" @click="dropdownHandleClose(item)">x</Button>
            </div>
            <Button type="text" v-for="childItem in item.classification.classificationsDtos" @click="dropdownButtonClicked(childItem)">{{childItem.classificationName}}</Button>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div style="width: 1000px;"><divider></divider></div>
      <div class="search-videoCardGrid" style="width: 900px;" v-if="formData">
        <Row type="flex" justify="start">
          <Col span="6" v-for="item in respVideoData.data">
            <div @click="toVideoDetail(item)">
              <Card :padding=0 style="width: 200px;margin-top: 20px;cursor:pointer" class="search-video-image">
                <div style="overflow: hidden;height: 100px"><img :src="item.previewImageUrl" style="width: 200px; height: 100px"></div>
                <div style="white-space:normal; word-break:break-all;overflow:hidden;margin: 5px;height:20px;">{{item.title}}</div>
                <div style="margin-top: 5px;margin-bottom: 5px"><Icon type="logo-youtube" style="margin-left: 5px"/> {{item.playTimes}}<Icon type="ios-time" style="margin-left: 20px"/>{{item.createTime.substr(0,10)}}</div>
              </Card>
            </div>
          </Col>
        </Row>
      </div>
      <Page :total="respVideoData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
            @on-page-size-change="getPageCount" style="margin-top: 50px"></Page>
    </div>
</template>

<script>
    import ClassificationService from "../services/ClassificationService";
    import VideoService from "../services/VideoService";

    export default {
        name: "SearchVideoComponent",
        data(){
            return{
              classificatoinService:null,
              videoService:null,
              formData:{
                classificationDropdownData:[],
                searchClassificationId:null,
                searchTitle:"",
                searchOrderType:0,
                currentPage: 0,
                pageCount: 10,
                videoDetailDto: null
              },
              respVideoData:{data:[], total:null},
            }
        },
        created(){
          this.init();
        },
        methods:{
          init(){
            this.classificatoinService = new ClassificationService(this);
            this.videoService = new VideoService(this);
            this.classificatoinService.getAllClass(function (_this, data) {
              data.data.forEach(function (classifcationsDto) {
               let classification = {"classification":classifcationsDto, "visible":false};
               _this.formData.classificationDropdownData.push(classification);
              })
              // console.log(_this.formData.classificationDropdownData);
            })
          },
          searchVideo(currentPage, pageCount){
            let params = {
              "title": this.formData.searchTitle,
              "orderType": this.formData.searchOrderType,
              "auditState": 1,
              "page":{"start":currentPage+"", "count":pageCount+""}
            };
            this.videoService.searchVideo(params, function (_this, data) {
              _this.respVideoData.data = data.data;
              _this.respVideoData.total = data.page.total;
              console.log(_this.respVideoData.data);
            });
          },
          searchVideoByClass(currentPage, pageCount){
            let params = {
              "currentPage": currentPage + "",
              "pageCount": pageCount + "",
              "title": this.formData.searchTitle,
              "orderType": this.formData.searchOrderType,
              "auditState": 1,
              "classificationId": this.formData.searchClassificationId
            };
            this.videoService.searchVideo(params, function (_this, data) {
              _this.respVideoData.data = data.data;
              _this.respVideoData.total = data.page.total;
              console.log(_this.respVideoData.data);
            });
          },
          changeOrderType(orderType){
            this.formData.searchOrderType = orderType;
            this.searchVideo(this.formData.currentPage,this.formData.pageCount);
          },
          toVideoDetail(item){
            let routeUrl = this.$router.resolve({
              path: "/videoDetail",
              query: {videoId:item.id}
            });
            window.open(routeUrl.href, '_blank');

          },
          getCurrentPage(num){
            this.formData.currentPage = num-1;
            this.searchVideo(this.formData.currentPage, this.formData.pageCount);
          },
          getPageCount(pageSize){
            this.formData.pageCount = pageSize;
            this.searchVideo(this.formData.currentPage, this.formData.pageCount);
          },
          dropdownHandleOpen (item) {
            item.visible = true;
          },
          dropdownHandleClose (item) {
            item.visible = false;
          },
          dropdownButtonClicked(childItem){
            this.formData.searchClassificationId = childItem.id;
            this.searchVideoByClass(this.formData.currentPage, this.formData.pageCount)
            // console.log(this.formData.classificationId);
          }
        }
    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .search-video-image:hover{
    filter: brightness(90%);
    -webkit-transform:translateY(-2px);
  }
</style>
